<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>react_11_字符串形式的refs使用</title>
</head>
<body>
    <div id="test"></div>

    <!-- 引入react 核心库 -->
    <script type="text/javascript" src="./js/react.development.js"></script>
    <!-- 引入react-dom 用于支持react操作dom -->
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <!-- 引入babel 用于讲jsx转成js -->
    <script type="text/javascript" src="./js/babel.min.js"></script>
    <!-- 注意：从8开始需要引入一个新的js文件了，目的是对props加上限制 -->
    <script type="text/javascript" src="./js/prop-types.js"></script>

    <!-- 组 件 -->
    <script type="text/babel">
        class Demo extends React.Component{
            //点击事件
            click = ()=>{
                console.log(this)
                const {i1} = this.refs
                alert(i1.value)
            }
            //失焦事件
            blur=()=>{
                const {i2} = this.refs
                alert(i2.value)
            }
            render() {
                //给标签打上ref标签，但是！！！！！！！字符串形式的refs已经过时了，会有效率的问题
                //官方建议我们不使用字符串类型的ref，而使用回调函数类型的ref！！！！！！！！！！！！！！！
                return (
                    <div>
                        <input ref="i1" type="text" placeholder="点击按钮获取数据"/>
                        <br/>
                        <button onClick={this.click}>点我获取数据</button>
                        <br/>
                        <input ref="i2" onBlur={this.blur} type="text" placeholder="失焦获取数据"/>
                    </div>
                );
            }
        }
        ReactDOM.render(<Demo/>,document.getElementById('test'))
    </script>
</body>

</html>